<template>
  <div class="courseContainer">
		<div class="menu">
			<van-dropdown-menu active-color="#4970FD">
				<van-dropdown-item
					:title="text1"
					ref="item1"
				>
					<div class="itemContainer">
						<span :class="index===active1?'active':''" v-for="(item,index) in option1" :key="index" @click="clickOption1(item)">{{item.text}}</span>
					</div>
				</van-dropdown-item>
				<van-dropdown-item
					:title="text2"
					ref="item2"
				>
				<div class="itemContainer">
						<span :class="index===active1?'active':''" v-for="(item,index) in option2" :key="index" @click="clickOption2(item)">{{item.text}}</span>
				</div>
				</van-dropdown-item>
				<van-dropdown-item
					:title="text3"
					ref="item3"
				>
				<div class="itemContainers" v-if="text2 === '类型'">
					<div class="item" v-for="(item, index) in option3" :key="index">
						<div class="all">{{item.text}}:</div>
						<span v-for="(items, index) in item.children" :key="index">{{items.text}}</span>
					</div>
				</div>
				<div class="itemContainer" v-else>
						<span :class="index===active1?'active':''" v-for="(item,index) in option_act[0].children" :key="index" @click="clickOption2(item)">{{item.text}}</span>
				</div>
				</van-dropdown-item>
				<van-dropdown-item
					 title="时间"
					 ref="item4"
				>
				<div class="itemContainer">
					<span :class="index===active1?'active':''" v-for="(item,index) in option4" :key="index" @click="clickOption4(item)">{{item.text}}</span>
				</div>
				</van-dropdown-item>
			</van-dropdown-menu>
		</div>
	</div>
</template>

<script>
export default {
	name: 'course',
	data() {
		return {
			text1: '状态',
			active1: '',
			active2: '',
			active3: '',
			active1: '',
			text2: '类型',
			textStatus: 0,
			text3: '分类',
			option_act: null,
			text4: '时间',
			option1: [
				{ text: '全部', value: 0 },
				{ text: '已上架', value: 1 },
				{ text: '已下架', value: 2 },
			],
			option2: [
				{ text: '全部', value: 0 },
				{ text: '线下课', value: 1 },
				{ text: '线上课', value: 2 },
			],
			option3: [
				{text: '全部', value: 0},
				{
					text: '线上区',
					value: 2,
					children: [
						{ text: '教育学', value: 1-1},
						{ text: '文学', value: 1-2},
						{ text: '历史学', value: 1-3},
						{ text: '艺术学', value: 1-4},
						{ text: '哲学', value: 1-5},
						{ text: '法学', value: 1-6},
						{ text: '经济学', value: 1-7},
						{ text: '其他', value: 1-8},
					]
				},
				{
					text: '线下区',
					value: 1,
					children: [
						{ text: '1', value: 2-1},
						{ text: '2', value: 2-2},
						{ text: '3', value: 2-3},
						{ text: '4', value: 2-4},
						{ text: '4', value: 2-5},
						{ text: '5', value: 2-6},
						{ text: '6', value: 2-7},
						{ text: '6', value: 2-8},
					]
				}
			],
			option4: [
				{ text: '全部', value: 0},
				{ text: '一星期内', value: 1},
				{ text: '一个月内', value: 2},
				{ text: '一年内', value: 3},
			],
		}
	},
	watch: {
		// 监视是否选择了
		textStatus(newValue) {
			this.option_act = this.option3.filter(item => {
				if(newValue === item.value) {
					return item
				}
			})
			console.log(this.option_act)
		}
	},
	methods: {
		clickOption1(item) {
			this.active1 = item.value
			this.text1 = item.text
			console.log('----------------------', item.value)
			this.$refs.item1.toggle();
		},
		clickOption2(item) {
			this.active1 = item.value
			this.text2 = item.text
			this.textStatus = item.value
			this.$refs.item2.toggle();
			console.log('----------------------', item.value, item.text)
		},
		clickOption3(item) {
			this.active1 = item.value
			this.text3 = item.text
			this.$refs.item3.toggle();
			console.log('----------------------', item.value, item.text)
		},
		clickOption4(item) {
			this.active1 = item.value
			this.text4 = item.text
			this.$refs.item4.toggle();
			console.log('----------------------', item.value, item.text)
		},
	}
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/variable';
.itemContainer {
	padding: 2rem 2rem;
	overflow: hidden;
	width:100%;
	box-sizing: border-box;
	span{
		margin-right: 2rem;
		padding: .8rem 1.2rem;
		border-radius: 0.6rem;
		font-size: 1.2rem;
		line-height: 3.5rem;
		&.active{
			background-color: $mainColor;
			color:white;
		}
	}
}
.itemContainers {
	padding: 2rem 1rem;
	font-size: 2rem;
	.item {
		padding: 2rem 2rem;
		span {
			margin-right: 2rem;
			padding: .8rem 2rem;
			border-radius: 0.6rem;
			font-size: 1.2rem;
			line-height: 3.5rem;
		}
	}
}
.van-ellipsis {
	color: $mainColor;
}
</style>